<template>
  <div>
    <p>
      <textarea v-model="textValue"></textarea>
    </p>
    <p>
      <button @click="addComment">提交评论</button>
    </p>
  </div>
  <div>
    <comment-comp  :commentData="data.commentData" @add-reply="addReply" @remove="removeHandler"></comment-comp>
  </div>
</template>


<script setup>
import {ref,reactive} from "vue";
import useUserInfo from '@/stort/index.js'
// 使用vuex
const useUserInfoStore = useUserInfo()
const textValue = ref('')
import commentComp from './commentComp.vue'
let data = reactive({
  commentData:formatTree(getComment('one')) // 数据tree处理
})

const addComment = () => {
  //判空处理
  if(textValue.value === undefined || textValue.value == null || textValue.value.trim() === ''){
    alert('请输入评论')
    return
  }
  // 读取vuex中的数据
  const {id, userName} = useUserInfoStore.userInfo

  let commentInfo = {
    id: new Date().getTime(),
    pid: 0,
    uid: id,
    userName,
    comment: textValue.value
  }

  setComment('one', commentInfo)

  // 第一次追加数据，解决本地存上数据，刷新才会显示
  data.commentData.unshift(commentInfo)
  textValue.value = ''
}


const addReply = (item, replyText) => {
  if(replyText === undefined || replyText == null || replyText.trim() === '') {
    alert('请输入评论')
    return
  }
  const {id, userName} = useUserInfoStore.userInfo;
  const replyInfo = {
    id: new Date().getTime(),
    pid: item.id,
    uid: id,
    userName,
    comment: replyText,
    recoverName:item.userName
  }
  // 有子级就将当前数据放进去
   ;(item.children || (item.children = [])).unshift(replyInfo)
    setComment('one', replyInfo);
}

// 本地数据的存储，
// 1、将本地的数据先取出
// 2、追加新的数据
// 3、将数据转换字符串存入本地

function setComment(field, comment) {
  const commentList = JSON.parse(localStorage.getItem(field) || '[]')
  commentList.unshift(comment)
  localStorage.setItem(field, JSON.stringify(commentList))
}

// 本地取出数据
function getComment(field) {
  let arr = JSON.parse(localStorage.getItem(field) || '[]')
  return arr.reverse()
}

// 处理数据处理成tree的结构
function formatTree(data) {
  const result = []
  const map = {}
  // 以id为属性名作为每一项
  data.forEach(item => {
    map[item.id] = item
  })
  data.forEach(item => {
    // 再次循环data数据，通过pid可以读取到map中父级的数据,因为子级的pid 是父级的 id 给的；子级的pid == 父级的 id
    const parent = map[item.pid]
    if(parent) {//如果是父级其它数据就是子级
      // 如果是父级的话，并且有 children字段将当前的子级的数据放到children里面，没有的话开一个新数组
      ;(parent.children || (parent .children = [])).unshift(item)
    }else {
      // 循环完了，当找找没有子级的数据就将数据放到 result 结果中最后返回
      result.unshift(item)
    }
  })
  return result
}
</script>


<style scoped>

</style>
